<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作者详情页面</title>
    <link rel="stylesheet" href="bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <style>
        body{
            background-image: url("image/background_img.jpg");
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
        }
    </style>
</head>
<body>
    <header id="header"></header>

    <div class="container" id="writer">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/">首页</a></li>
                <li class="breadcrumb-item" aria-current="page"><a href="allAuthor.html">诗人大全</a></li>
                <li class="breadcrumb-item active" aria-current="page" v-text="info.name">李流芳</li>
            </ol>
        </nav>

        <div class="row">
            <div class="col col-sm-12 col-lg-9">
                <div class="card">
                    <div class="card-body d-flex">
                        <img class="mr-3" style="height:8rem;" :src="'image'+info.pic" />
                        <div>
                            <div>
                                <h4 class="card-title d-inline-block" v-text="info.name">李流芳</h4>
                                [<span class="ml-1" v-text="info.dynasty">明代</span>]
                            </div>
                            <p v-html="info.txt">
                                李流芳（1575～1629）明代诗人、书画家。字长蘅，一字茂宰，号檀园、香海、古怀堂、沧庵，晚号慎娱居士、六浮道人。歙县（今属安徽）人，侨居嘉定（今属上海市）。三十二岁中举人，后绝意仕途。诗文多写景酬赠之作，风格清新自然。与唐时升、娄坚、程嘉燧合称“嘉定四先生”。擅画山水，学吴镇、黄公望，峻爽流畅，为“画中九友”之一。亦工书法。
                            </p>
                        </div>
                    </div>
                </div>

                <div class="card mt-3">
                    <div class="card-header">
                        <h6><span v-text="info.name">李流芳</span>的诗词</h6>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled card-text">
                            <li><a :href="'poems.html?'+info.name"><span v-text="info.name">李流芳</span>所有的诗词(<span v-text="count">269</span>首)</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    var name = decodeURI(location.search.split("?")[1]);
    console.log(name)

    let vm_writer = new Vue({
        el:"#writer",
        data:{
            info:{},
            count:""
        },
        created:function () {
            axios({
                url:"/writer/"+name,
                method:"post"
            }).then(function (response) {
                vm_writer.info=response.data;
                console.log(response.data)
            });
            axios({
                url:"/poems/"+name,
                method:"post"
            }).then(function (response) {
                vm_writer.count = response.data
            })
        }
    })
</script>
</html>